<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=screen.width; user-scalable=no" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <title>PWManager</title>
            
            <link rel="stylesheet" href="css/jquery.mobile-1.0rc2.min.css"
                type="text/css">
                <link rel="stylesheet" href="css/pwmanager.css" type="text/css">
                    <script type="text/javascript" charset="utf-8"
                        src="js/phonegap/phonegap-1.1.0.js"></script>
                    <script type="text/javascript" src="js/barcodescanner/barcodescanner.js"></script>
                    <script type="text/javascript" src="js/seckey/pgseckey.js"></script>
                    <script type="text/javascript" src="js/jquery/jquery-1.6.4.js"></script>
                    <script type="text/javascript"
                        src="js/jquery/jquery.mobile-1.0rc2.min.js"></script>
                    <script type="text/javascript" src="js/jquery/jquery.json-2.3.min.js"></script>
                    <script type="text/javascript" src="js/jquery/jstorage.js"></script>
                    <script type="text/javascript" src="js/crypt/pidcrypt.js"></script>
                    <script type="text/javascript" src="js/crypt/pidcrypt_util.js"></script>
                    <script type="text/javascript" src="js/crypt/asn1.js"></script>
                    <script type="text/javascript" src="js/crypt/jsbn.js"></script>
                    <script type="text/javascript" src="js/crypt/rng.js"></script>
                    <script type="text/javascript" src="js/crypt/prng4.js"></script>
                    <script type="text/javascript" src="js/crypt/rsa.js"></script>
                    <script type="text/javascript" src="js/main.js"></script>
                    <script type="text/javascript" src="js/json2.js"></script>
                    
                    
    </head>
    <body id="pwmanager">
        
        <div data-role="page" id="home">
            
            <div class="ui-header ui-bar-f" data-theme="f" data-form="ui-bar-f"
                data-role="header" role="banner" data-position="fixed">
                <h1>PWManager</h1>
            </div>
            
            <div data-role="content" id="content">
                <ul data-role="listview" data-inset="true" data-theme="f"
                    class="nomarg-top ui-listview ui-listview-inset ui-corner-all ui-shadow">
                    <li data-swatch="f"
                        class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-top ui-btn-up-undefined"
                        data-role="list-divider" role="header" data-form="ui-bar-f">Menu</li>
                    <li data-theme="f"
                        class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-icon ui-corner-bottom ui-btn-up-f"
                        id="generateKeysMenu">
                        <div class="ui-btn-inner ui-li">
                            <div class="ui-btn-text">
                                <a href="#showKeys" onclick="generateKeys()"
                                    data-transition="slide" class="ui-link-inherit">Generate
                                    Keys</a>
                            </div>
                            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
                        </div>
                    </li>
                    <li
                        class="bk-beige-dk ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-icon ui-corner-top ui-btn-up-f"
                        data-theme="f" id="scanCodeMenu">
                        <div class="ui-btn-inner ui-li">
                            <div class="ui-btn-text">
                                <a href="#showPassword" onclick="scanCode()"
                                    data-transition="slide" class="ui-link-inherit">Scan code</a>
                            </div>
                            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
                        </div>
                    </li>
                    <li data-theme="f"
                        class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-icon ui-corner-bottom ui-btn-up-f"
                        id="showKeysMenu">
                        <div class="ui-btn-inner ui-li">
                            <div class="ui-btn-text">
                                <a href="#showKeys" onclick="showKeys()" data-transition="slide"
                                    class="ui-link-inherit">Show Keys </a>
                            </div>
                            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
                        </div>
                    </li>
                    <li data-theme="f"
                        class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-icon ui-corner-bottom ui-btn-up-f"
                        id="deleteKeysMenu">
                        <div class="ui-btn-inner ui-li">
                            <div class="ui-btn-text">
                                <a onclick="deleteKeys()" class="ui-link-inherit">Delete Keys</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div data-role="footer" data-theme="f" data-form="ui-bar-f"
                data-id="footer" data-position="fixed" class="ui-bar">
                <div data-role="controlgroup" data-type="horizontal">
                    <a href="#info" data-transition="slideup" data-role="button"
                        data-icon="info">Info</a> <a href="#settings"
                            data-transition="slideup" data-role="button" data-icon="gear">Settings</a>
                </div>
            </div>
        </div>
        <div data-role="page" id="showKeys">
            
            <div class="ui-header ui-bar-f" data-theme="f" data-form="ui-bar-f"
                data-role="header">
                <a data-transition="slide" href="#home"
                    class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-f"
                    data-icon="arrow-l" data-theme="f"><span
                        class="ui-btn-inner ui-btn-corner-all"> <span
                            class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span> <span
                                class="ui-btn-text">Back</span></span> </a>
                <h1>Keys</h1>
            </div>
            <a data-transition="slideup" data-role="button" href="#exportPubkey">Export Keys</a>
            <div data-role="content">
                <p>Public Key:</p>
                <textarea value="Text Input" id="publicKey" rows="15" cols="65"></textarea>
                <p>Private Key:</p>
                <textarea value="Text Input" id="privateKey" rows="15" cols="65"> </textarea>
            </div>
            
            <div data-role="footer" data-theme="f" data-form="ui-bar-f"
                data-id="footer" data-position="fixed" class="ui-bar">
                <div data-role="controlgroup" data-type="horizontal">
                    <a href="#info" data-transition="slideup" data-role="button"
                        data-icon="info">Info</a> <a href="#settings"
                            data-transition="slideup" data-role="button" data-icon="gear">Settings</a>
                </div>
            </div>
            
        </div>
        <div data-role="page" id="showPassword">
            
            <div class="ui-header ui-bar-f" data-theme="f" data-form="ui-bar-f"
                data-role="header">
                <a data-transition="slide" href="#home"
                    class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-f"
                    data-icon="arrow-l" data-theme="f"><span
                        class="ui-btn-inner ui-btn-corner-all"> <span
                            class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span> <span
                                class="ui-btn-text">Back</span></span> </a>
                <h1>Password</h1>
            </div>
            
            <div data-role="content">
                <div id="result"></div>
            </div>
            
            <div data-role="footer" data-theme="f" data-form="ui-bar-f"
                data-id="footer" data-position="fixed" class="ui-bar">
                <div data-role="controlgroup" data-type="horizontal">
                    <a href="#info" data-transition="slideup" data-role="button"
                        data-icon="info">Info</a> <a href="#settings"
                            data-transition="slideup" data-role="button" data-icon="gear">Settings</a>
                </div>
            </div>
            
        </div>
        <div data-role="page" id="info">
            
            <div class="ui-header ui-bar-f" data-theme="f" data-form="ui-bar-f"
                data-role="header">
                <a data-transition="slide" href="#home"
                    class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-f"
                    data-icon="arrow-l" data-theme="f"><span
                        class="ui-btn-inner ui-btn-corner-all"> <span
                            class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span> <span
                                class="ui-btn-text">Back</span></span> </a>
                <h1>Info</h1>
            </div>
            
            <div data-role="content">
                <p>
				<b>Import/Export of the public and private Key:</b>
                </p>
                <p>
                First, connect your iPhone/iPad to your computer using a USB cable. Then, on your computer.
                </p>
                <ul>
                    <li>Open iTunes(make sure you are using iTunes 9.1 or later)</li>
                    <li>Select your iPhone/iPad in the "Device" list displayed on the left</li>
                    <li>Select the "Apps" tab and scroll to the bottom of the page</li>
                    <li>Select this application in the "Apps" list located in the "File Sharing" section</li>
                    <li>You can now drag and drop the public/private key to any location on your computer</li>
                </ul>
                <p>
                Import public/private key from a local machine. Create with openssl an public/private key in the PEM format. Rename 
                this file to "private_key.pem" and "public_key.pem" and copy this file with iTunes in the app.
                </p>
                <p>
                Its import that the files are named with "private_key.pem" and "public_key.pem" otherwise the App can't find the keys. 
                </p>
            </div>
            <div data-role="footer" data-theme="f" data-form="ui-bar-f"
                data-id="footer" data-position="fixed" class="ui-bar">
                <div data-role="controlgroup" data-type="horizontal">
                    <a href="#info" data-transition="slideup" data-role="button"
                        data-icon="info">Info</a> <a href="#settings"
                            data-transition="slideup" data-role="button" data-icon="gear">Settings</a>
                </div>
            </div>
        </div>
        <div data-role="page" id="exportPubkey">
            <div class="ui-header ui-bar-f" data-theme="f" data-form="ui-bar-f"
                data-role="header">
                <a data-transition="slide" href="#home"
                    class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-f"
                    data-icon="arrow-l" data-theme="f"><span
                        class="ui-btn-inner ui-btn-corner-all"> <span
                            class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span> <span
                                class="ui-btn-text">Back</span></span> </a>
                <h1>Export Pubkey</h1>
            </div>
                <table>
                    <tr>
                        <td>URL:</td>
                        <td><input type="text" id="url" value="http://localhost:8080/webadapter/"></td>
                    </tr>
                    <tr>
                        <td>Username:</td>
                        <td><input type="text" id="username"></td>
                    </tr>
                    <tr>
                        <td>Password</td>
                        <td><input type="password" id="password"></td>
                    </tr>
                    <tr>
                        <td/>
                        <td><a href="#exportPubkey" onclick="exportKeys()" data-role="button">Commit</a>
                        </tr>
                </table>


        </div>
        <div data-role="page" id="settings">
            
            <div class="ui-header ui-bar-f" data-theme="f" data-form="ui-bar-f"
                data-role="header">
                <a data-transition="slide" href="#home"
                    class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-f"
                    data-icon="arrow-l" data-theme="f"><span
                        class="ui-btn-inner ui-btn-corner-all"> <span
                            class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span> <span
                                class="ui-btn-text">Back</span></span> </a>
                <h1>Settings</h1>
            </div>
            
            <div data-role="content"></div>
            <div data-role="footer" data-theme="f" data-form="ui-bar-f"
                data-id="footer" data-position="fixed" class="ui-bar">
                <div data-role="controlgroup" data-type="horizontal">
                    <a href="#info" data-transition="slideup" data-role="button"
                        data-icon="info">Info</a> <a href="#settings"
                            data-transition="slideup" data-role="button" data-icon="gear">Settings</a>
                </div>
            </div>
        </div>
    </body>
</html>